<!DOCTYPE html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>High contrast theme - Black</title>
</head>
	<script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxgantt_quick_info.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxgantt_tooltip.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/skins/dhtmlxgantt_contrast_black.css" type="text/css" title="no title" charset="utf-8">

	<script type="text/javascript" src="../common/testdata.js"></script>
	<style type="text/css">
		html, body{
			background: #000;
			font-family: arial;
			height:100%;
			padding:0px;
			margin:0px;
			overflow: hidden;
		}
		.header{
			height: 50px;
			text-align: center;
			line-height: 50px;

		}
		.main-content{
			height: 600px;
			height: calc(100vh - 50px);
		}
	</style>
<body>
	<div class="header">
		<input type="button" value="Show Lightbox" onclick="gantt.createTask()"/>
		<input type="button" value="Show Quick Info" onclick="gantt.showQuickInfo(gantt.getTaskByTime()[0].id)"/>
		<input type="button" value="Show message" onclick="gantt.message({text:'Some text'})"/>
		<input type="button" value="Show error" onclick="gantt.message({text:'Some text', type:'error'})"/>
		<input type="button" value="Show alert" onclick="gantt.alert({text:'Some text'})"/>
		<input type="button" value="Show lert with header" onclick="gantt.alert({text:'Some text', title:'Title'})"/>
	</div>
	<div class="main-content">
		<div id="gantt_here" style='width:100%; height:100%;'></div>
	</div>
	<script type="text/javascript">
		gantt.init("gantt_here");
		gantt.message({text:"Some text", expire:-1});
		gantt.message({text:"Some text", type:"error", expire:-1});
		gantt.parse(projects_with_milestones);
	</script>
</body>